<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swiper demo</title>
<script src="js/jquery/3.4.1/jquery.js"></script>
<script src="js/swiper.min.js"></script>
<link href="css/swiper.min.css" type="text/css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>

<body>
<div class="wrapper">

  <div class="background">
    <img src="images/background.jpg" alt="">
  </div>
  <div class="item-bg"></div>

  <div class="news-slider">
    <div class="news-slider__wrp swiper-wrapper">
      <div class="news-slider__item swiper-slide">
        <a href="#" class="news__item">
          <div class="news-date">
            <span class="news-date__title">24</span>
            <span class="news-date__txt">八月</span>
          </div>
          <div class="news__title">
            SNH48<br>盛夏好声音
          </div>

          <p class="news__txt">
            《盛夏好声音》是SNH482015年发行的第八张EP，也是SNH48第二张总选投票专辑，共收录了《盛夏好声音》、《自我主张》、《亲吻进行式》、《眼神加速度》、《清纯哲学》5首歌曲
          </p>

          <div class="news__img">
            <img src="images/girl6.jpg" alt="news">
          </div>
        </a>
      </div>

      <div class="news-slider__item swiper-slide">
        <a href="#" class="news__item">
          <div class="news-date">
            <span class="news-date__title">25</span>
            <span class="news-date__txt">八月</span>
          </div>
          <div class="news__title">
            SNH48<br>盛夏好声音
          </div>

          <p class="news__txt">
            《盛夏好声音》是SNH482015年发行的第八张EP，也是SNH48第二张总选投票专辑，共收录了《盛夏好声音》、《自我主张》、《亲吻进行式》、《眼神加速度》、《清纯哲学》5首歌曲
          </p>

          <div class="news__img">
            <img src="images/girl1.jpg" alt="news">
          </div>
        </a>
      </div>

      <div class="news-slider__item swiper-slide">
        <a href="#" class="news__item">
          <div class="news-date">
            <span class="news-date__title">26</span>
            <span class="news-date__txt">八月</span>
          </div>
          <div class="news__title">
            SNH48<br>盛夏好声音
          </div>

          <p class="news__txt">
            《盛夏好声音》是SNH482015年发行的第八张EP，也是SNH48第二张总选投票专辑，共收录了《盛夏好声音》、《自我主张》、《亲吻进行式》、《眼神加速度》、《清纯哲学》5首歌曲
          </p>

          <div class="news__img">
            <img src="images/girl2.jpg" alt="news">
          </div>
        </a>
      </div>

      <div class="news-slider__item swiper-slide">
        <a href="#" class="news__item">
          <div class="news-date">
            <span class="news-date__title">27</span>
            <span class="news-date__txt">八月</span>
          </div>
          <div class="news__title">
            SNH48<br>盛夏好声音
          </div>

          <p class="news__txt">
           《盛夏好声音》是SNH482015年发行的第八张EP，也是SNH48第二张总选投票专辑，共收录了《盛夏好声音》、《自我主张》、《亲吻进行式》、《眼神加速度》、《清纯哲学》5首歌曲
          </p>

          <div class="news__img">
            <img src="images/girl3.jpg" alt="news">
          </div>
        </a>
      </div>

      <div class="news-slider__item swiper-slide">
        <a href="#" class="news__item">
          <div class="news-date">
            <span class="news-date__title">28</span>
            <span class="news-date__txt">八月</span>
          </div>
          <div class="news__title">
            SNH48<br>盛夏好声音
          </div>

          <p class="news__txt">
            《盛夏好声音》是SNH482015年发行的第八张EP，也是SNH48第二张总选投票专辑，共收录了《盛夏好声音》、《自我主张》、《亲吻进行式》、《眼神加速度》、《清纯哲学》5首歌曲
          </p>

          <div class="news__img">
            <img src="images/girl4.jpg" alt="news">
          </div>
        </a>
      </div>

      <div class="news-slider__item swiper-slide">
        <a href="#" class="news__item">
          <div class="news-date">
            <span class="news-date__title">29</span>
            <span class="news-date__txt">八月</span>
          </div>
          <div class="news__title">
            SNH48<br>盛夏好声音
          </div>

          <p class="news__txt">
            《盛夏好声音》是SNH482015年发行的第八张EP，也是SNH48第二张总选投票专辑，共收录了《盛夏好声音》、《自我主张》、《亲吻进行式》、《眼神加速度》、《清纯哲学》5首歌曲
          </p>

          <div class="news__img">
            <img src="images/girl5.jpg" alt="news">
          </div>
        </a>
      </div>
    </div>

    <div class="news-slider__ctr">

      <div class="news-slider__arrows">
        <button class="news-slider__arrow news-slider-prev">
          <span class="icon-font">
            <svg class="icon icon-arrow-left"><use xlink:href="#icon-arrow-left"></use></svg>
          </span>
        </button>
        <button class="news-slider__arrow news-slider-next">
          <span class="icon-font">
            <svg class="icon icon-arrow-right"><use xlink:href="#icon-arrow-right"></use></svg>
          </span>
        </button>
      </div>

      <div class="news-slider__pagination"></div>

    </div>

  </div>

</div>

<svg hidden="hidden" id="icon">
  <defs>
    <symbol id="icon-arrow-left" viewBox="0 0 32 32">
      <title>arrow-left</title>
      <path d="M0.704 17.696l9.856 9.856c0.896 0.896 2.432 0.896 3.328 0s0.896-2.432 0-3.328l-5.792-5.856h21.568c1.312 0 2.368-1.056 2.368-2.368s-1.056-2.368-2.368-2.368h-21.568l5.824-5.824c0.896-0.896 0.896-2.432 0-3.328-0.48-0.48-1.088-0.704-1.696-0.704s-1.216 0.224-1.696 0.704l-9.824 9.824c-0.448 0.448-0.704 1.056-0.704 1.696s0.224 1.248 0.704 1.696z"></path>
    </symbol>
    <symbol id="icon-arrow-right" viewBox="0 0 32 32">
      <title>arrow-right</title>
      <path d="M31.296 14.336l-9.888-9.888c-0.896-0.896-2.432-0.896-3.328 0s-0.896 2.432 0 3.328l5.824 5.856h-21.536c-1.312 0-2.368 1.056-2.368 2.368s1.056 2.368 2.368 2.368h21.568l-5.856 5.824c-0.896 0.896-0.896 2.432 0 3.328 0.48 0.48 1.088 0.704 1.696 0.704s1.216-0.224 1.696-0.704l9.824-9.824c0.448-0.448 0.704-1.056 0.704-1.696s-0.224-1.248-0.704-1.664z"></path>
    </symbol>
  </defs>
</svg>

<script src="js/slide.js"></script>

</body>
</html>
